<template>
  <backContainer>
    <card
      :width="1200"
      height="calc(100vh - 68px - 18px - 30px)"
      style="overflow: hidden"
      :top="24"
      class="types"
    >
      <div class="cards">
        <div class="title">{{ form.noticeTitle }}</div>
        <div class="content" v-html="form.noticeContent"></div>
        <div
          v-if="form.noticeFiles.length > 0"
          class="file shou"
          @click="$openFile(item.url,item.name)"
          v-for="(item, index) in form.noticeFiles"
          :key="index"
        >
          <img :src="returnIcon(item.url, 1)" alt="加载失败" class="icon"/>
          {{ item.name }}
        </div>
      </div>
    </card>
  </backContainer>
</template>
<script>
import { returnIcon } from '@/utils/util.js'
//TODO 只写了全局模板
import wangEditor from '@/components/wangEditor.vue'
import {
  getPost_notice
} from '@/api/notificationCenter/notification'

export default {
  components: { wangEditor },
  name: 'Post',
  data() {
    return {
      returnIcon: function(url, type) {
        return returnIcon(url, type)
      },
      form: {
        noticeId: undefined,
        noticeTitle: undefined,
        noticeContent: undefined,
        noticeType: 2,
        startTime: '',
        endTime: '',
        receiverList: [],
        noticeFiles: [],
        publishStatus: '',
        noticeStatus: '',
        readStatus: false,
        remark: '',
        status: '',
        time: []
      }
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    to(url) {
      window.open(url)
    },
    getInfo() {
      getPost_notice(this.$route.query.id).then((response) => {
        this.form = response.data
        this.form.noticeFiles = this.form.noticeFiles
          ? JSON.parse(this.form.noticeFiles)
          : []
      })
    }
  }
}
</script>
<style scoped lang="scss">
.cards {
  margin-top: 20px;
  height: calc(100vh - 68px - 18px - 70px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 20px 20px 20px 20px;

  .title {
    text-align: center;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
  }

  .time {
    margin-top: 16px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }

  .content {
    width: 1160px;
    margin-top: 32px;
    margin-bottom: 30px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .file:hover {
    color: #333333;
  }

  .file {
    .icon {
      margin: 6px 6px 0 0;
      width: 20px;
      height: 20px;
    }

    margin-top: 10px;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #1b64ff;
    line-height: 22px;
    text-align: left;
    font-style: normal;
    text-decoration-line: underline;
  }
}
</style>
